
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="./three.js"></script>
        <script src="./OrbitControls.js"></script>
        <script src="./stats.min.js"></script>


        <script>

        let scene,camera,renderer
        let controls,stats
        let group
        			var mouseX = 0, mouseY = 0;

        init()

        animate()

        function init(){
            // <!-- 开始建立cube模型 -->
            // 创建场景
            scene = new THREE.Scene()
            scene.background = new THREE.Color( 0xf0f0f0 );

                //创建结构
                const geometry = new THREE.BoxGeometry(100,100,100)

                //创建材质
                const material = new THREE.MeshNormalMaterial({
                    // color:'steelblue',
                    // wireframe:true,
                     // vertexColors: THREE.FaceColors
                })

            //创建模型
            // cube = new THREE.Mesh(geometry,material)

            //向场景中插入模型
            // scene.add(cube)
            group = new THREE.Group()

            for(let i = 0;i<200;i++){
                let mesh = new THREE.Mesh(geometry,material)
                mesh.position.x = Math.random() * 2000 - 1000;
                mesh.position.y = Math.random() * 2000 - 1000;
                mesh.position.z = Math.random() * 2000 - 1000;
                mesh.rotation.x = Math.random() * 2 * Math.PI;
                mesh.rotation.y = Math.random() * 2 * Math.PI;
                mesh.matrixAutoUpdate = false;
                mesh.updateMatrix();
                group.add(mesh)
            }

            scene.add(group)


            //创建相机
            camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 10000)
            camera.position.set(0,0,500)
            // camera.lookAt(scene.position)

            //
            // //加入点光源
            // const point = new THREE.PointLight(0xffffff)
            // point.position.set(400,200,300)//设置位置
            // scene.add(point)
            //
            // //加入环境光源
            // const ambient = new THREE.AmbientLight(0x444444)
            // scene.add(ambient)//环境光不用设置光源位置

            //插入辅助axis
            const axis = new THREE.AxesHelper(250)
            scene.add(axis)

            //插入性能检测
            stats = new Stats();
            document.body.appendChild( stats.dom );

            //创建渲染器
            renderer = new THREE.WebGLRenderer()
            renderer.setPixelRatio( window.devicePixelRatio );//设置设备像素比。通常用于避免HiDPI设备上绘图模糊
            renderer.setSize(window.innerWidth,window.innerHeight)
            // renderer.setClearColor(0xf0f0f0)
            document.body.appendChild(renderer.domElement)

			window.addEventListener( 'resize', onWindowResize, false );//屏幕自适应



            //实现鼠标操作
            controls = new THREE.OrbitControls(camera)
            //添加渲染函数
            // controls.update()
    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }


    function onDocumentMouseMove(event) {

        mouseX = ( event.clientX - windowHalfX ) * 10;
        mouseY = ( event.clientY - windowHalfY ) * 10;

    }

        function animate() {

            requestAnimationFrame( animate );//定时函数
            // controls.update()

            // stats.begin();//性能检测模块
            render();
            // stats.end();
            stats.update()
        }

        function render() {

            camera.position.x += ( mouseX - camera.position.x ) * .05;
            camera.position.y += ( - mouseY - camera.position.y ) * .05;
            camera.lookAt( scene.position );

            var currentSeconds = Date.now();
            group.rotation.x = Math.sin( currentSeconds * 0.0007 ) * 0.5;
            group.rotation.y = Math.sin( currentSeconds * 0.0003 ) * 0.5;
            group.rotation.z = Math.sin( currentSeconds * 0.0002 ) * 0.5;

            renderer.render( scene, camera );

        }


        </script>
    </body>
</html>


        </script>
    </body>
</html>
